<template>
  <layout title="collapse折叠面板">
    <layout-content title="基础使用">
      <tn-collapse>
        <tn-collapse-item v-for="(item, index) in data" :key="index">
          <template v-slot:title>
            {{ item.title }}
          </template>
          {{ item.content }}
        </tn-collapse-item>
      </tn-collapse>
    </layout-content>

    <layout-content title="允许打开全部">
      <tn-collapse :accordion="false">
        <tn-collapse-item v-for="(item, index) in data" :key="index">
          <template v-slot:title>
            {{ item.title }}
          </template>
          {{ item.content }}
        </tn-collapse-item>
      </tn-collapse>
    </layout-content>

    <layout-content title="默认打开项">
      <tn-collapse v-model="collapseIndex">
        <tn-collapse-item v-for="(item, index) in data" :key="index">
          <template v-slot:title>
            {{ item.title }}
          </template>
          {{ item.content }}
        </tn-collapse-item>
      </tn-collapse>
      <view class="tn-margin-top-sm tn-border-top">
        <tn-collapse v-model="collapseIndexArray" :accordion="false">
          <tn-collapse-item v-for="(item, index) in data" :key="index">
            <template v-slot:title>
              {{ item.title }}
            </template>
            {{ item.content }}
          </tn-collapse-item>
        </tn-collapse>
      </view>
    </layout-content>

    <layout-content title="禁止第二项打开">
      <tn-collapse>
        <tn-collapse-item v-for="(item, index) in data" :key="index" :disabled="index === 1">
          <template v-slot:title>
            {{ item.title }}
          </template>
          {{ item.content }}
        </tn-collapse-item>
      </tn-collapse>
    </layout-content>

    <layout-content title="不显示箭头">
      <tn-collapse :arrow="false">
        <tn-collapse-item v-for="(item, index) in data" :key="index">
          <template v-slot:title>
            {{ item.title }}
          </template>
          {{ item.content }}
        </tn-collapse-item>
      </tn-collapse>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCollapse from '@/tuniao-ui/components/tn-collapse/src/Collapse.vue'
import TnCollapseItem from '@/tuniao-ui/components/tn-collapse/src/CollapseItem.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 演示数据
const data: {title: string, content: string}[] = [
  {
    title: '关雎',
    content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
  },
  {
    title: '长歌行',
    content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
  },
  {
    title: '秋风辞',
    content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！'
  }
]
let collapseIndex = ref<number>(0)
let collapseIndexArray = ref<number[]>([0,2])
</script>

<style lang="scss" scoped>
</style>
